<template>
    <div class="container">
        <t-input-adornment size="large" class="search-input">
            <template #prepend>
                <t-select :options="protocolOptions" default-value="search_engine" size="large" v-model="search_engine"
                    class="search-engine-select" />
            </template>
            <t-input placeholder="请输入内容" size="large" @enter="handleEnter" v-model="search_value"
                class="search-input-field" />
            <template #append>
                <t-icon name="search" size="34" />
            </template> </t-input-adornment>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue';
// 搜索字符串
const search_value = ref('');
const search_engine = ref('必应');

const search_engine_data = ref([
    { "name": "google", "url": "https://www.google.com/search?q=" },
    { "name": "必应", "url": "https://www.bing.com/search?q=" },
    { "name": "百度", "url": "https://www.baidu.com/s?wd=" },
    { "name": "搜狗", "url": "https://www.sogou.com/web?query=" },
    { "name": "360", "url": "https://www.so.com/s?ie=utf-8&q=" },
    { "name": "CSDN", "url": "https://so.csdn.net/so/search?q=" },
    { "name": "知乎", "url": "https://www.zhihu.com/search?type=content&q=" },
    { "name": "B站", "url": "https://search.bilibili.com/all?keyword=" }])


const protocolOptions = search_engine_data.value.map(engine => ({ label: engine.name, value: engine.name }));

const handleEnter = () => {
    const selectedEngine = search_engine_data.value.find(engine => engine.name === search_engine.value);
    if (selectedEngine) {
        // 构建搜索 URL
        const searchUrl = `${selectedEngine.url}${search_value.value}`;
        // 打开新标签页进行搜索
        window.open(searchUrl, '_blank');
    }
}
</script>

<style lang='scss' scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    width: 80%;

}

.search-input {
    .search-engine-select {
        width: 100px;
    }

    .search-input-field {
        width: 500px;
    }
}
</style>